<template>  
  <view class="upload-container">  
    <!-- 上传提示 -->  
    <view class="upload-tip"> 
	 <button style="width: 200px;">上传图片</button>
      <view style="color: #8b878a;">仅支持一般图片格式。如JPG、PNG</view>  
	  <text style="color: #8b878a;">文件大小10M以下。5张以下</text>
    </view>  
  
    <!-- 照片占位符，这里使用view模拟，实际开发中可能需要图片预览组件 -->  
    <view class="photo-placeholder" v-for="n in 5" :key="n" >  
      <text class="placeholder-text">照片</text>  
      <!-- 红色的X标记，表示不允许直接上传（这里只是示意） -->  
      <text class="prohibited-mark">X</text>  
    </view>  
  
    <!-- 添加按钮 -->  
    <button class="add-btn" @click="handleAdd" style="width: 400px">添加</button>  
  </view>  
</template>  
  
<script>  
export default {  
  methods: {  
    // 处理添加点击事件，这里只是示例，实际逻辑需要根据业务需求编写  
    handleAdd() {  
      // 这里可以弹出文件选择器，或者执行其他添加逻辑  
      uni.showToast({  
        title: '点击了添加',  
        icon: 'none'  
      });  
      // 假设使用uni.chooseImage选择图片  
      // uni.chooseImage({  
      //   count: 1, // 默认9  
      //   sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有  
      //   sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有  
      //   success: function (res) {  
      //     // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片  
      //     console.log(res.tempFilePaths)  
      //   }  
      // });  
    }  
  }  
};  
</script>  
  
<style scoped>  
.upload-container {  
  padding: 20px;  
  display: flex;  
  flex-direction: column;  
  align-items: center;  
}  
  
.upload-tip {  
  margin-bottom: 20px;  
  font-size: 16px;  
  color: #333;  
}  
  
.photo-placeholder {  
  position: relative;  
  width: 400px; /* 占位符的宽度，根据实际需要调整 */  
  height: 300px; /* 占位符的高度，根据实际需要调整 */  
  background-color: #e0e0e0; /* 占位符的背景色 */  
  margin-bottom: 10px; /* 占位符之间的间距 */  
  display: flex;  
  justify-content: center;  
  align-items: center;  
}  
  
.placeholder-text {  
  font-size: 14px;  
  color: #666;  
}  
  
.prohibited-mark {  
  position: absolute;  
  right: 5px;  
  top: 5px;  
  font-size: 20px;  
  color: red;  
}  
  
.add-btn {  
  background-color: #007aff;  
  color: #fff;  
  border: none;  
  padding: 10px 20px;  
  border-radius: 5px;  
  margin-top: 20px;  
  cursor: pointer;  
}  
</style>